<template>
	<view class="enroll">
		<view class="title">
			注册
		</view>
		<input class="uni-input fist" v-model="formEnroll.email" placeholder="请输入邮箱" />
		<view class="enrollInput">
			<input class="uni-input " v-model="formEnroll.emailcode" maxlength="6" placeholder="请输邮箱验证码" />
			<view class="sendCodeName" @click="sendCode" v-if="countDown==0">
				发送验证码
			</view>
			<view class="sendCodeName" @click="sendCode" v-else>
				{{countDown}} S
			</view>
		</view>
		<view class="passwordicos">
			<image src="@/static/image/login/eye.png" v-if="showEye" @click="isbindTop" class="eye" alt="" />
			<image src="@/static/image/login/eyeclose.png" v-if="!showEye" @click="isbindTop" class="eye" alt=""/>
			<input class="uni-input " :type="showEye?'text':'password'  " v-model="formEnroll.password"
				placeholder="请输入密码" />
		</view>
		<button type="primary" class="btn" @click="submit">注册</button>
		<view class="noAccountNumber">有账号, <span class="ospan" @click="goLogin">请登录</span> </view>
	</view>
</template>

<script>
	import {
		sendEmail,
		reguser
	} from "@/api/login.js";
	import {
		regex
	} from '@/utils/routeInterception.js'
	export default {
		name: 'AppView3Enroll',

		data() {
			return {
				showEye: false,
				regex: new regex(),
				formEnroll: {
					email: "",
					password: "",
					emailcode: ""
				},
				countDown: 0
			};
		},

		onShow() {
		
		},

		methods: {
			isbindTop() {
				console.log(11111)
				this.showEye = !this.showEye
			},
			verifyEmail() {
				if (this.regex.validEmail(this.formEnroll.email) == false) {
					uni.showToast({
						icon: "error",
						title: "请输入正确邮箱",
					})
				}
				return this.regex.validEmail(this.formEnroll.email)
			},
			verifyCode() {
				if (this.formEnroll.emailcode.length < 6 || this.formEnroll.emailcode == "") {
					uni.showToast({
						icon: "error",
						title: "请填写6位验证码",
					})
					return false
				} else {
					return true
				}
			},
			verifyPassword() {
				if (this.regex.validPwd(this.formEnroll.password) == false) {
					uni.showToast({
						icon: "error",
						title: "请填写6位验证码",
					})
				}
				return this.regex.validPwd(this.formEnroll.password)
			},

			verifyTheAccount() {
				const verifyEmail = this.verifyEmail();
				const verifyCode = this.verifyCode();
				const verifyPassword = this.verifyPassword();
				if (!verifyEmail) {
					uni.showToast({
						icon: "error",
						title: "邮箱格式不正确"
					})
					return fasle
				}
				if (!verifyCode) {
					uni.showToast({
						icon: "error",
						title: "请输入6位验证码"
					})
					return fasle
				}
				if (!verifyPassword) {
					uni.showToast({
						icon: "error",
						title: "最少包含一个大写，小写，数字 不少于6为数的密码"
					})
					return fasle
				}
				return true
			},


			// 注册
			submit() {
				console.log(this.verifyTheAccount())
				if (this.verifyTheAccount()) {
					reguser(this.formEnroll).then(res => {
						if (res.code == 200) {
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 2000)
							uni.showToast({
								icon: "success",
								title: res.msg
							})
						}
					})
				}
			},
			countDownFun() {

				let timer = null
				let countDown = 60
				timer = setInterval(() => {
					this.countDown = countDown
					if (this.countDown > 0) {
						countDown--
					} else {
						clearInterval(timer)
					}
				}, 1000)
			},

			sendCode() {
				if (this.verifyEmail) {
					sendEmail({
						email: this.formEnroll.email,
						businessEnum: "UPDATE_ENROLL"
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "success",
								title: "发送成功",
							})
							this.countDownFun()
						}
					})
				}

			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		},
	};
</script>

<style lang="scss">
	@import "@/uni.scss";
	.enroll {
		width: 750rpx;
		height: 100vh;
		// background: linear-gradient(150deg, #001f3f, #0088a9,  rgba(41, 46, 75, 1), #ebf5ee,rgba(24, 27, 44, 1));
		   background: url("@/static/image/login/loginBgc.png");
		overflow: hidden;
		margin: 0 auto;
		

		.uni-input {
			width: 80%;
			height: 80rpx;
			border: 1px solid $app-input-border;
			backdrop-filter: blur(0rpx);
			margin: 0 auto;
			padding: 0rpx 5%;
			margin-top: 50rpx;
			color: $app-text-black; 
			font-size: 30rpx;
			font-weight: 400;
			border-radius: 4rpx;
			background: $app-input-color;
			backdrop-filter: blur(0px);
		}

		.fist {
			margin-top: 100rpx;
		}

		.btn {
			width: 90%;
			height: 100rpx;
			border-radius: 8rpx;
			margin-top: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $app-bgc-btn;
			color: $app-text-color;
			font-weight: bold;
			&:active{
				opacity: 0.5;
			}
		}

		.noAccountNumber {
			width: 90%;
			margin: 0 auto;
			font-size: 30rpx;
			text-align: center;
			color: $app-text-color-80;
			margin-top: 40rpx;

			.ospan {
				color: $app-text-color;

			}
		}

		.enrollInput {
			position: relative;
		}

		.sendCodeName {
			width: 150rpx;
			height: 40rpx;
			color: $app-text-color;
			font-size: 25rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 60rpx;
			top: 20rpx;
			border-left: 2rpx solid $app-text-color;
		}

		.passwordicos {
			position: relative;

			.eye {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 80rpx;
				top: 23rpx;
				z-index: 9;
			}
		}
	}

	.title {
		width: 90%;
		margin: 0 auto;
		opacity: 1;
		/** 文本1 */
		font-size: 70rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		line-height: 41.02rpx;
		color: $app-text-color;
		text-align: left;
		vertical-align: top;
		padding-bottom: 72rpx;
		padding-top: 200rpx;
	}
</style>